<template>
  <div class="plant_detail">
    <header>
      <BaseNavBar title="植物详情" :is-nav="true" />
    </header>
    <main style="margin-top: 8px;">
      <Card>
        <section class="plant">
            <img class="plant_img" :src="`${plant?.cover}`" v-if="plant?.cover"/>
            <section class="plant_title">昵称：{{ plant?.nickname }}</section>
            <section class="plant_brief">{{ plant?.brief }}</section>
            <section class="plant_condition">种类：{{ plant?.variety }}</section>
            <section class="plant_condition">种植日期：{{ plant?.plantDate }}</section>
            <section class="plant_condition">地址：{{ plant?.address }}</section>
            <section class="plant_time">创建时间：{{ plant?.createTime}}</section>
        </section>
      </Card>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from 'vue-router';
import { showToast } from 'vant';
import Card from '@/components/Card/index.vue';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import {getPlantDetail} from '@/apis/plant';

const route = useRoute();
const plant = ref({});

const init = async () => {
  const { data = {}, msg, code } = await getPlantDetail(route.params?.id);
  if (code === 200) {
    plant.value = data;
    return;
  }
  showToast(msg);
};

onMounted(() => {
  init();
})
</script>

<style lang="less" scoped>
.plant{
  box-sizing: border-box;
  padding: 8px;
  &_img{
    width: 100%;
    height: 320px;
  }
  &_title{
    font-size: 16px;
    color: #000;
  }
  &_brief{
    font-size: 12px;
    color: #999;
  }
  &_condition{
    font-size: 14px;
    color: #666;
  }
  &_time{
    font-size: 12px;
    color: #999;
  }
}
</style>
